<template>
    <div class="songs-tabsview">
      <ul class="big-box">
        <van-list v-model="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
          <li v-for="(item,index) in playlists" :key="index">
            <div>
              <img class="cover" :src="item.coverImgUrl">
            </div>
            <div class="bofangliang">
              <span>{{item.playCount |numFilter(0)}}</span>
            </div>
            <span class="title">{{item.name}}</span>
          </li>
        </van-list>
      </ul>
    </div>
</template>
<script>
export default {
  props:['tags'],
    data(){
    return{
      playlists:[],
      loading: false,
      finished: false,
      offset:1,
      limit:30,
      code:false
    }
  },
  created(){
    this.getTabData();
  },
  methods: {
    onLoad(){
      setTimeout(() => {
          this.getTabData()
        // 加载状态结束
        this.loading = false;

        // 数据全部加载完成
        if (this.code) {
          this.finished = true;
        }
      }, 1000);
    },
    getTabData:function(){
      this.$request('get','/top/playlist?limit='+this.limit+'&order=hot&cat='+this.tags+"&offset="+(this.offset*this.limit)).then((res)=>{
        console.log(res);
        if(res.code!=200){
          this.code = true
        }
        this.offset++;
        console.log(this.offset);
        res.playlists.forEach(item => {
          this.playlists.push(item)
        });
      })
    }
  },filters:{
    //处理播放量的格式
    /**
     * param num:小数位固定位数
     * value::处理的数值
     */
    numFilter(value,num){
        return parseFloat(value/10000).toFixed(num)+" 万"
    }
}
}
</script>
<style scoped>
ul.big-box{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
}
ul.big-box li{
    position: relative;
    width: 30%;
    height: 12rem;
    float: left;
    padding: 0.4rem;
}
ul.big-box li > span{
    color:black;
}
.cover{
    position: relative;
    width:auto;
    height:auto;
    max-width:100%;
    max-height:100%;
    border-radius: 1rem;
    
}
.bofangliang{
  position: absolute;
  color: white;
  font-size: smaller;
  top:10px;
  right: 10px;
  background-color: rgb(93, 92, 92);
  border-radius: 1rem;
  padding: 0.2rem;
}
/*
display: -webkit-box;定义为盒子模型显示
  overflow: hidden;超出盒子部分隐藏
  text-overflow: ellipsis;超出部分用...表示
  -webkit-line-clamp: 2;超出两行隐藏
  -webkit-box-orient: vertical;从上到下垂直排列子元素（设置伸缩盒子的子元素排列方式）
 */
.title{
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
